<template>
  <div class="bottom_bar">
    <div class="check_content">
      <check-button class="check_button"
                    :is-checked="isSelectAll"
                    @click.native="checkClick"></check-button>
      <span>全选</span>
      <div class="button_total">合计:{{totalPrice}}</div>
      <div class="calculate"
           @click="calcClick">去计算({{checkLength}})</div>
    </div>
  </div>
</template>

<script>
import CheckButton from 'components/content/checkButton/CheckButton'

export default {
  name: 'CartBottomBar',
  components: {
    CheckButton
  },
  computed: {
    totalPrice() {
      return '$' + this.$store.state.cartList.filter(item => {
        return item.checked
      }).reduce((preValue, item) => {
        return preValue + (item.price * item.count)
      }, 0).toFixed(2)
    },
    checkLength() {
      return this.$store.state.cartList.filter(item => { return item.checked }).length
    },
    isSelectAll() {
      // return !(this.$store.state.cartList.filter(item => !item.checked).length)
      if (this.$store.state.cartList.length === 0) return false
      return !this.$store.state.cartList.find(item => !item.checked)
    }
  },
  data() {
    return {

    };
  },
  created() {

  },
  mounted() {

  },
  methods: {
    checkClick() {
      if (this.isSelectAll) {
        // 如果原来是全部选中的,点击全部取消
        this.$store.state.cartList.forEach(item => item.checked = false)
      } else {
        // 如果原来是没全部选中的,点击全部选中
        this.$store.state.cartList.forEach(item => item.checked = true)
      }

    },
    calcClick() {
      if (!this.isSelectAll) {
        this.$toast.shows('请选择想要的商品')
      }
    }
  }
};
</script>

<style scoped>
.bottom_bar {
  height: 40px;
  background-color: #f0f0f0;
  position: relative;
  display: flex;
  font-size: 13px;
}

.check_content {
  display: flex;
  width: 100%;
  align-items: center;
  margin-left: 6px;
}

.check_button {
  width: 20px;
  margin-right: 5px;
  height: 20px;
}
.button_total {
  margin-left: 20px;
}
.calculate {
  margin-left: auto;
  line-height: 30px;
  padding: 5px;
  color: #fff;
  background-color: #ff5000;
  height: 100%;
}
</style>
